var ui_ele_ids = [
  'padding_left',
  'padding_right',
  'padding_top',
  'padding_bottom',
  'line_space',
  'letter_space',
  'edt_sample_text',
  'edt_from_font',
  'edt_from_color',
  'edt_to_font',
  'edt_to_color',
  'btn_switch_font',
  'checkbox_show_r',
  'checkbox_show_b',
  'checkbox_show_f',
  'edt_scale',
  'canvas_b',
  'canvas_r',
  'ref_size',
  'draw_size'
]

var ui = {}
ui_ele_ids.map((id)=>{
  var ele = document.getElementById(id)
  ele.on = ele.addEventListener.bind(ele)
  ui[id] = ele
})

var ctx_b = ui.canvas_b.getContext("2d")
var ctx_r = ui.canvas_r.getContext("2d")
var line_width = 0.1
var texter_r = new Texter(ctx_r)
var texter_b = new Texter(ctx_b)

ui.ref_size.on('input',function(e){
  texter_r.ref_size = Number(e.target.value)
  render()
})
ui.draw_size.on('input',function(e){
  texter_b.ref_size = Number(e.target.value)
  render()
})
ui.edt_sample_text.on('keydown',function(e){
  var { target, keyCode} = e
  if(keyCode == 9){
    e.preventDefault();
    var indent = '\t';
    var start = target.selectionStart;
    var end = target.selectionEnd;
    var selected = window.getSelection().toString();
    selected = indent + selected.replace(/\n/g,'\n'+indent);
    target.value = target.value.substring(0,start) + selected + target.value.substring(end);
    target.setSelectionRange(start+indent.length,start+selected.length);
  }
})
document.addEventListener('selectionchange',render)

ui.edt_from_font.on('input',render)
ui.edt_to_font.on('input',render)
ui.btn_switch_font.on('click',function(){
  var v = ui.edt_from_font.value
  ui.edt_from_font.value = ui.edt_to_font.value 
  ui.edt_to_font.value = v

  v = ui.edt_from_color.value
  ui.edt_from_color.value = ui.edt_to_color.value 
  ui.edt_to_color.value = v
  render()
})

ui.checkbox_show_r.on("click",render)
ui.checkbox_show_b.on("click",render)
ui.checkbox_show_f.on("click",render)

function render(){
  console.log('render')
  texter_r.ref_size = Number(ui.ref_size.value)
  texter_b.ref_size = Number(ui.draw_size.value)

  texter_r.padding_left = Number(ui.padding_left.value)
  texter_r.padding_right = Number(ui.padding_right.value)
  texter_r.padding_top = Number(ui.padding_top.value)
  texter_r.padding_bottom = Number(ui.padding_bottom.value)
  texter_r.line_space = Number(ui.line_space.value)
  texter_r.letter_space = Number(ui.letter_space.value)

  texter_b.padding_left = Number(ui.padding_left.value)
  texter_b.padding_right = Number(ui.padding_right.value)
  texter_b.padding_top = Number(ui.padding_top.value)
  texter_b.padding_bottom = Number(ui.padding_bottom.value)
  texter_b.line_space = Number(ui.line_space.value)
  texter_b.letter_space = Number(ui.letter_space.value)

  // edt.style.font = ui.edt_from_font.value
  ctx_r.font = ui.edt_from_font.value
  ctx_r.lineWidth = line_width

  texter_r.ref_size = 1000
  texter_b.ref_size = 500
  var info = texter_r.calculate(ui.edt_sample_text.value)

  info.selectionStart = ui.edt_sample_text.selectionStart
  info.selectionEnd = ui.edt_sample_text.selectionEnd

  var s = ui.edt_scale.value * 0.01
  var w = Math.ceil(texter_r.toPixel(info.total_w) * s)
  var h = Math.ceil(texter_r.toPixel(info.total_h) * s)
  canvas_b.width = w
  canvas_b.height = h
  canvas_b.style.width = ''+w+'px'
  canvas_b.style.height = ''+h+'px'

  ctx_b.save()
  ctx_b.clearRect(0, 0, canvas_b.width, canvas_b.height);
  ctx_b.scale(s,s)

  if(ui.checkbox_show_r.checked){
    ctx_b.font = ui.edt_from_font.value
    ctx_b.fillStyle = ui.edt_from_color.value
    ctx_b.lineWidth = line_width
    texter_b.drawText(info)
  }
  if(ui.checkbox_show_b.checked){
    ctx_b.font = ui.edt_to_font.value
    ctx_b.fillStyle = ui.edt_to_color.value
    texter_b.drawText(info)
  }
  if(ui.checkbox_show_f.checked){
    texter_b.drawDebug(info)
  }
  ctx_b.restore()
}
ui.edt_sample_text.on('input',render)
ui.edt_scale.on('input',render)
ui.padding_left.on('input',render)
ui.padding_right.on('input',render)
ui.padding_top.on('input',render)
ui.padding_bottom.on('input',render)
ui.line_space.on('input',render)
ui.letter_space.on('input',render)
ui.edt_from_color.on('input',render)
ui.edt_to_color.on('input',render)
ui.edt_sample_text.value = '~\n'+
  "你好！世界！\n"+
  "abcdefghijklmnopqrstuvwxyz\n"+
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ\n"+
  "1234567890\n"+
  "~!@#$%^&*()_+{}|:\"<>?/.,';][\=-\`'\n"+
  "space x2 = (  )\n"+
  "space x4 = (    )\n"+
  "space x8 = (        )\n"+
  "tab x1 = (\t)\n"
  "tab x2 = (\t\t)\n"
  "tab x3 = (\t\t\t)\n"
  "tab x4 = (\t\t\t)\n"
render()